<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>购物车</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/car.css">
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
		<!-- top头部部分开始 -->
		<div id="top">
			<div class="top">
				<div class="right">
					<ul>
						<li> <a href="" title="">登录</a></li>
						<li> <a href="" title="">注册</a></li>
						<li> <a href="" title="">我的订单</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- logo购物车部分开始 -->
		<div id="search">
			<div class="logo">
				<a href="" title=""><img src="images/logo.png" alt=""></a>
			</div>
			<!-- 搜索框部分开始 -->
			<div class="header_search">
				<div class="form">
					<form action="" method="post" accept-charset="utf-8">
						<input class="input" type="text" name="q" placeholder="360行车记录仪">
						<input class="submit" type="submit" value="">
					</form>
				</div>
				<div class="shopcar">
					<div class="gwc">
						<a href="" title=""><i></i>我的购物车<span>(0)</span></a>
					</div>
					<div class="gwchtc">
						<a href="" title="">您的购物车没有东西<span>(0)</span></a>
					</div>
				</div>
				<div class="hot">
				<a href="">智能出行伴侣</a><a href="">智能出行伴侣</a><a href="">智能出行伴侣</a>
				</div>
			</div>
			
		</div>
		<!-- top购物车部分结束 -->
		<!-- top分类部分开始 -->
		<div id="cate">	
			<div id="top_cate">
			<div class="cate">
				<a href=""> 全部智能酷品</a>
			</div>
			<ul>
				<li><a href="">手机</a></li>
				<li><a href="">行车记录仪</a></li>
				<li><a href="">儿童手表</a></li>
				<li><a href="">手机</a></li>
				<li><a href="">路由器</a></li>
				<li><a href="">路由器</a></li>
			</ul>
			</div>
		</div>
	<!-- 公共部分结束 -->
		<div id="my_car">
			<div class="car">
				<h3>我的购物车</h3>
			</div>
			<div class="car_list">				
					<div class="title">
						<ul>
							<li class="lit">商品信息</li>
							<li>单价</li>
							<li>数量</li>
							<li>小计</li>
							<li>操作</li>
						</ul>
					</div>				
			</div>
			
			<div class="list">				
					<!-- <div class="title"> -->
						<ul>
							<li class="lit">
								<div class="img">
									<img src="images/content/cs001.jpg" alt="">
								</div>
								<a href="" title="">360手机f4标准版移动4G魔力白</a>
							</li>
							<li class="dj"><span>599</span>元</li>
							<li><button class="min" type="button">-</button><input class="z" type="text" name="" value="1"><button class="add" type="button">+</button></li>
							<li class="xj"><span>599.00</span>元</li>
							<li><a href="" title="">删除</a></li>
						</ul>
					<!-- </div>		 -->
			</div>
			<script>
				
				$(function(){
				    //var t = $("#text_box");
				    $(".add").click(function(){ 
				var t=  $(this).parent().find(".z"); //根据这个来找到它相对的元素 当然也可以直接 //$(this).prev(); 这个直接来找到
				        t.val(parseInt(t.val())+1);
				        // alert(t);
				        setTotal($(this),t.val());
				   })
				    $(".min").click(function(){
				var t=  $(this).parent().find(".z"); //根据这个来找到它相对的元素 当然也可以直接 //$(this).next(); 这个直接来找到
						if(parseInt(t.val())==0){
							return;
						}
				        t.val(parseInt(t.val())-1);
				        setTotal($(this),t.val());
				   })
				    function setTotal(obj,number){
				    var total=number*$(obj).parent().parent().find(".dj span").text(); //这里算出总价
				    $(obj).parent().parent().find(".xj").html(total.toFixed(2)); 
				    return 
				    }
				   // setTotal()
				})

			</script>
			<!-- 商品价格总计 -->
			<div class="count">
				<div class="money">
					<p>商品总计:<span>599</span>元</p>
				</div>
				<div class="btn">
					<a href="" class="b1" title="继续购物" data-monitor="shopcart_continueshop_click">继续购物</a>
					<a href="javascript:void(0);" class="b2" title="去结算" data-monitor="shopcart_placeorder_click">去结算</a>
				</div>



			</div>
		</div>

		   <!-- 7天无理由退货部分 -->
		   <br>
		<div id="ser">
			<div class="ser">
				<div class="li">
					<i>7</i><span>7天无理由退货</span>
				</div>
				<div class="li">
					<i>15</i><span>15天免费换货</span>
				</div>
				<div class="li lin">
					<i>包</i><span>7满99元包邮</span>
				</div>
			</div>
		</div>
		<div id="footer">
	         <div class="ft">
	         		<br>
	         		<br>
	         		<br>
	              <p>360商城©2013-2016 360公司版权所有 京ICP备08010314号-43 京公网安备11000002000006号奇酷互联网络科技（深圳）有限公司 0755-61898999 深圳市南山区学苑大道1001号南山智园A2栋</p>
	         </div>
        </div>
</body>
</html>